import React, { Component } from 'react';
import '../styles/UserOrder.scss'
import { NavBar, Tabs, Empty } from 'antd-mobile'
import * as service from '../api/index'

class UserOrder extends Component {
    constructor(props) {
        super(props)
        this.state = {
            allorderlist: [],

        }
    }
    back() {//回退
        this.props.history.push('/index/personalcenter')
    }
    async componentDidMount() {
        var res3 = await service.user_orderlist({ userid: localStorage.getItem('userid') })
        this.setState({ allorderlist: res3.data.data })
    }
    goDetail(proid) {//去详情页面
        this.props.history.push({ pathname: '/detail', state: { id: proid } })
    }
    render() {
        return (
            <div className='userorder' >
                <div className='header' >
                    <div className="top">
                        <NavBar onBack={() => { this.back() }}>订单查看</NavBar>
                    </div>
                </div>
                <div className="tabs">
                    <Tabs >
                        <Tabs.Tab title='全部订单' key='allorder'>
                            {
                                this.state.allorderlist && this.state.allorderlist.length != 0 ?
                                    <div className="searchResult_main">
                                        {
                                            this.state.allorderlist.map((item, index) => {
                                                return (
                                                    <div className="item" key={index} onClick={() => { this.goDetail(item.proid) }}  >
                                                        <div className="left">
                                                            <img src={item.img1} alt="" />
                                                        </div>
                                                        <div className="right">
                                                            <div className="name">{item.proname}</div>
                                                            <div className='time' >{item.time}</div>
                                                            <div className="Price">￥{item.originprice}</div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                    :
                                    <div className="nothing">
                                        <Empty description='没有搜索到商品'
                                            style={{ padding: '64px 0', backgroundColor: 'white' }}
                                            imageStyle={{ width: 128 }}
                                        />
                                    </div>
                            }


                        </Tabs.Tab>
                        <Tabs.Tab title='待付款' key='waitm'>
                            {
                                this.state.allorderlist && this.state.allorderlist.length != 0 ?
                                    <div className="searchResult_main">
                                        {
                                            this.state.allorderlist.map((item, index) => {
                                                return (
                                                    <div className="item" key={index} onClick={() => { this.goDetail(item.proid) }}  >
                                                        <div className="left">
                                                            <img src={item.img1} alt="" />
                                                        </div>
                                                        <div className="right">
                                                            <div className="name">{item.proname}</div>
                                                            <div className='time' >{item.time}</div>
                                                            <div className="Price">￥{item.originprice}</div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                    :
                                    <div className="nothing">
                                        <Empty description='没有搜索到商品'
                                            style={{ padding: '64px 0', backgroundColor: 'white' }}
                                            imageStyle={{ width: 128 }}
                                        />
                                    </div>
                            }
                        </Tabs.Tab>
                        <Tabs.Tab title='待收货' key='waits'>
                            {
                                this.state.searchlist && this.state.searchlist.length != 0 ?
                                    <div className="searchResult_main">
                                        {
                                            this.state.searchlist.map((item, index) => {
                                                return (
                                                    <div className="item" key={index} onClick={() => { this.goDetail(item.proid) }}  >
                                                        <div className="left">
                                                            <img src={item.img1} alt="" />
                                                        </div>
                                                        <div className="right">
                                                            <div className="name">{item.proname}</div>
                                                            <div className="Price">￥{item.originprice}</div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                    :
                                    <div className="nothing">
                                        <Empty description='没有搜索到商品'
                                            style={{ padding: '64px 0', backgroundColor: 'white' }}
                                            imageStyle={{ width: 128 }}
                                        />
                                    </div>
                            }
                        </Tabs.Tab>
                        <Tabs.Tab title='待评价' key='waitp'>
                            {
                                this.state.searchlist && this.state.searchlist.length != 0 ?
                                    <div className="searchResult_main">
                                        {
                                            this.state.searchlist.map((item, index) => {
                                                return (
                                                    <div className="item" key={index} onClick={() => { this.goDetail(item.proid) }}  >
                                                        <div className="left">
                                                            <img src={item.img1} alt="" />
                                                        </div>
                                                        <div className="right">
                                                            <div className="name">{item.proname}</div>
                                                            <div className="Price">￥{item.originprice}</div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                    :
                                    <div className="nothing">
                                        <Empty description='没有搜索到商品'
                                            style={{ padding: '64px 0', backgroundColor: 'white' }}
                                            imageStyle={{ width: 128 }}
                                        />
                                    </div>
                            }
                        </Tabs.Tab>
                    </Tabs>
                </div>

            </div>
        );
    }
}

export default UserOrder;